<template>
  <view class="page">
    <Navbar
      title="个性定制化"
      :height="Number(height)"
      :boundingTop="Number(boundingTop)"
    ></Navbar>

    <view
      class="content-box cc-absolute"
      :style="{ marginTop: 12 + 'px' }"
    >
      <view class="content-box-swiper">
        <u-swiper
          style="width: 80%; height: 100%"
          height="100%"
          :list="list1"
          @change="change"
          indicator
          indicatorMode="dot"
          :autoplay="false"
          indicatorActiveColor="#333333"
          indicatorInactiveColor="rgba(0,0,0,0.42);"
        ></u-swiper>
      </view>

      <view class="content-box-title">
        <text
          style="font-size: 28rpx; color: rgba(24, 0, 0); font-weight: 400"
          >{{ title }}</text
        >
      </view>

      <view
        class="content-box-title"
        style="flex-wrap: wrap; margin-top: 50rpx"
      >
        <text
          style="
            font-size: 28rpx;
            color: rgba(24, 0, 0, 0.6);
            font-weight: 400;
            width: 80%;
            text-align: center;
          "
          >在AI的笔触下</text
        >
        <text
          style="
            font-size: 28rpx;
            color: rgba(24, 0, 0, 0.6);
            font-weight: 400;
            width: 80%;
            text-align: center;
          "
          >平凡的照片跃然成为梦幻的艺术篇章</text
        >
      </view>

      <view
        style="
          font-weight: 500;
          font-size: 28rpx;
          color: #fff;
          margin-top: 46rpx;
          margin-left: 32rpx;
          border-radius: 72rpx;
          background: #f56364;
          height: 88rpx;
          width: calc(100% - 64rpx);
          display: flex;
          justify-content: center;
          align-items: center;
          box-shadow: inset 0rpx 8rpx 12rpx 0rpx #FFAFB0;
        "
        @click="clickButton"
      >
        {{ title }}
      </view>
    </view>
  </view>
</template>

<script>
import setMarginTop from "@/mixins/setMarginTop"; // 引入 mixin
import Navbar from "@/components/navbar.vue";
export default {
  mixins: [setMarginTop], // 使用 mixin
  components: {
    Navbar,
  },
  data() {
    return {
      title: "照片AI风格转绘",
      list1: [
        "https://ai.mojudianzisw.com/static/img/shop/ai/swiper1.png",
        "https://ai.mojudianzisw.com/static/img/shop/ai/swiper2.png",
      ],
      current: 0
    };
  },
  methods: {
    change(item) {
      console.log(item);
      this.current = item.current;
      if (item.current == 0) {
        this.title = "照片AI风格转绘";
      } else {
        this.title = "AI画图"
      }
    },
    clickButton() {
      if(this.current == 0) {
        this.$navigateTo("/pages/creation/index");
      } else {
        this.$navigateTo("/pages/aiimage/index");
      }
    }
  },
};
</script>

<style scoped lang="scss">
.box-width {
  width: 200rpx;
  height: 100%;
}
.content-box {
  width: 100%;
  min-height: 500rpx;
  height: auto;
  // border: 1px solid black;
  &-swiper {
    width: 100%;
    height: 844rpx;
    // border: 1px solid black;
  }
}
.content-box-title {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
